<template>
  <div class="home">
    <Layout>
      <Header>
        <header-menu></header-menu>
      </Header>
      <Content style="background-color: #fff">
        <div class="user-header">
          <div class="container" style="position: relative">
            <div class="edit-box">
              <span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span>
              <span class="edit-btn"><Icon type="md-cloud-upload" /> 上传封面图片</span>
            </div>
            <div class="user-info clearfix">
              <div class="avatar">
                <img  src="../../assets/meirong1.jpg" alt="">
              </div>
              <div class="details">
                <p class="name">{{name}}</p>
                <p class="tip">
                  <span>头衔：</span>
                  红粉宝宝代理
                  <!--<span class="edit-btn"><Icon type="ios-hammer" /> 编辑</span>-->
                </p>
                <p class="tip">
                  <span>红粉格言：</span>
                  <span :contenteditable="contenteditable" ref="bio">{{bio}}</span>
                  <span class="edit-btn" @click="subimt" v-if="show !==true"><Icon type="ios-hammer"  /> 编辑</span>
                  <span class="edit-btn" @click="baocun" v-if="show===true">保存</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="my-menu">
          <div class="container" style="width: 1400px">
            <Menu mode="horizontal" style="height: 44px;line-height: 46px" :active-name="activeMenu">
              <MenuItem :name="i.path" v-for="(i,k) in menu" :key="k" :to="i.path">
                {{i.name}} <span v-if="i.count">（{{i.count}}）</span>
              </MenuItem>
            </Menu>
          </div>
        </div>
        <div class="container">
          <router-view></router-view>
        </div>
      </Content>
      <Footer>
        <bottom-icon></bottom-icon>
        <page-footer></page-footer>
      </Footer>
    </Layout>
  </div>
</template>

<script>
import HeaderMenu from '../../components/Header/'
import PageFooter from '@/components/Footer/'
import BottomIcon from '@/components/BottomIcon/'

export default {
  name: 'My',
  components: {
      HeaderMenu,
      BottomIcon,
      PageFooter
  },
   data () {
      return {
          activeMenu: '/my/myindex',
          menu: [
              {id: 1, name: '首页', path: '/my/myindex', count: ''},
              {id: 2, name: '预约', path: '/my/myorder', count: ''},
              {id: 3, name: '日记', path: '/my/mydiary', count: ''},
              {id: 4, name: '圈子', path: '/my/mygroup', count: ''},
              {id: 5, name: '粉丝', path: '/my/myfans', count: '12'},
              {id: 6, name: '关注', path: '/my/myfriending', count: '12'},
              {id: 6, name: '项目', path: '/my/project'},
              {id: 6, name: '主题/活动', path: '/my/mytheme'},
              {id: 6, name: '资讯/相册', path: '/my/myinfo'}
          ],
          contenteditable:false,
          show:false,
          name:'',
          bio:'',
      }
   },
    created () {
      this.activeMenu = this.$route.matched[1].path
        this.init()
    },
    methods: {
        init () {
            let  _this = this
            _this.$post('/api/user/getAllUserInfo',
                {
                  token:_this.$token,
                },function (res) {
                    _this.name=res.data.nickname
                    _this.bio=res.data.bio
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        subimt () {
            this.contenteditable = true
            this.show=true
        },
        baocun () {
            this.contenteditable = false
            this.show=false
            let _this = this
            this.$post('/api/user/editbio',
                {
                  token:_this.$token,
                  bio:_this.$refs.bio.innerHTML
                },function (res) {
                    _this.$message.success(res.msg);
                    _this.bio = _this.$refs.bio.innerHTML

                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        }
    }

}
</script>

<style lang="less" scoped>
  @import "../../style/style.less";
  .user-header {
    height: 350px;
    background-color: #f9d7e3;
    padding-top: 54px;
    .edit-box {
      position: absolute;
      top: -20px;
      right: 10px;
    }
    .edit-btn {
      background-color: #fff;
      color: #333;
      font-size: 14px;
      display: inline-block;
      text-align: center;
      padding: 0 6px;
      height: 26px;
      line-height: 26px;
      margin-left: 15px;
      cursor: pointer;
      i {
        color: @theme-color-dark;
      }
    }
    .user-info {
      .avatar {
        width: 96px;
        border: 6px solid @theme-color;
        border-radius: 96px;
        line-height: 1;
        font-size: 0;
        float: left;
        margin-right: 20px;
        img{
          width: 84px;
          border-radius: 84px;
        }
      }
      .details {
        float: left;
        color: #333;
        .name {
          font-size: 22px;
          color: @theme-color-dark;
          margin-bottom: 10px;
        }
        .tip {
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .my-menu {
    background-color: @theme-color;
    .ivu-menu-light {
      background-color: @theme-color!important;
    }
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item {
      color: #fff!important;
      border-bottom-color: @theme-color!important;
      width: 147px;
      text-align: center;
    }
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover {
      background-color: @theme-color-dark!important;
      border-bottom-color: @theme-color-dark!important;
    }
    .ivu-menu-horizontal.ivu-menu-light:after {
      background: @theme-color!important;
    }
  }
</style>
